<style scoped>
    .center-box{
        width: 12.37rem;
        margin: 1rem auto 0 auto;
    }
    .img-box{
        width: 100%;
        height:4.28rem;
        position: relative;
        box-shadow: 0 0 .3rem rgba(0,0,0,0.2);
        overflow: hidden;
        border-radius:.1rem;
    }
    .img-box img{
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .name-box{
        margin-top: .44rem;
        line-height: .56rem;
        color:#333;
        font-size: .36rem;
        position: relative;
        padding-left: .68rem;
    }
    .name-box:before{
        content:'';
        position: absolute;
        width: .4rem;
        height: .04rem;
        background: #333;
        left:0rem;
        top: 50%;
        margin-top: -.02rem;
    }
    .passage{
        line-height: .45rem;
        color:#6c6c6c;
    }
</style>
<template>
    <div class="center-box">
        <div class="img-box">
            <img :src="about.img" alt="">
        </div>
        <div class="name-box">
            ZEBRA
        </div>
        <div class="passage-box">
            <p class="passage" v-for="item in about.passage" v-html="item"></p>
        </div>
    </div>
</template>

<script>
    import rootData from '../assets/js/dataConfig'
    export default {
        name: "About",
        data(){
            return{
                about:rootData.about
            }
        },

    }
</script>
